import Base from "../Base.js";
import cinemaApi from "../../api/cinemas.js"
require("./index.css")
export default class Login extends Base {

  render() {
    this.el.html(`
    <div class="layui-inline">
    <div class="layui-input-inline">

    </div>
</div>
<div class="layui-input-inline" style=" margin-left: 15px;">
    <input type="text" name="findText" placeholder="请输入查询影院" autocomplete="off"
        class="layui-input" style="width: 200px;" required lay-verify="required">
</div>
<button class="layui-btn layui-suo" data-type="reload">搜索</button>
</div>


    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="hash" style="width:60px;">影厅管理</a>
    <a class="layui-btn layui-btn-xs" data-method="confirmTrans"  lay-event="edit" style="width: 30px;">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"style="width: 30px;">删除</a>
</script>
    
    `);
  }
  async rerender() {
    // const data = await cinemaApi.get();
    // console.log(data[0].status, 1);

  }
  handle() {

    layui.use('table', async function () {
      var table = layui.table;
      const data = await cinemaApi.get();
      // 对状态值进行判断，将状态值变成html标签渲染在页面上
      data.map((item) => {
        if (item.status) {
          item.status = `<input type="checkbox" _id="${item._id}"  checked lay-filter="checkClose" name="checkClose" lay-skin="switch" lay-text="营业|停业"/>     
          `;
        } else {
          item.status = `
          <input type="checkbox" _id="${item._id}"id="checkClose" lay-filter="checkClose" name="checkClose" lay-skin="switch" lay-text="营业|停业"/>
          
          `;
        }
      });

      // 渲染表格
      function rerender(data) {
        layui.table.render({
          elem: '#test',
          data: data,
          limit: 10,
           cols: [[
             { field: 'name',  title: '影院名称', sort: true, align: 'center' }
            , { field: 'address', title: '首映地区', sort: true, align: 'center' }
            , { field: 'phone',  title: '联系电话', sort: true, align: 'center' }
            , { field: 'status', title: '是否营业', align: 'center' }
            , { fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center' }
          ]]
          , page: true,
        });
      }
      rerender(data);

      // 更新影院信息，以及删除影院信息
      table.on('tool(test)', function (obj) {
        var data = obj.data;
        var _id = obj.data._id;
        if (obj.event === 'del') {
          layer.confirm('真的删除行么', async function (index) {
            obj.del();
            console.log(_id);
            const data = await cinemaApi.delete({ _id });
            layer.close(index);
          });
        } else if (obj.event === 'edit') {
          let str = ``;
          if (data.status) {
            str += `<form class="layui-form" style="background-color:white;padding-top:20px;padding-bottom:60px;padding-left:60px;width:500px">
           <div class="layui-form-item">
             <label class="layui-form-label">影院名称</label>
             <div class="layui-input-block">
               <input type="text" value="${data.name}" name="cinemaName" lay-verify="title" autocomplete="off" placeholder="请输入需要修改的值" class="layui-input">
             </div>
           </div>
           <div class="layui-form-item">
             <label class="layui-form-label">请输入影院详细地址</label>
             <div class="layui-input-block">
               <input type="text" value="${data.address}" name="address"  lay-verify="title" autocomplete="off" placeholder="（XX区XX路XXX号）" class="layui-input">
             </div>
           </div> 
           <div class="layui-form-item">
             <label class="layui-form-label">联系电话</label>
             <div class="layui-input-block">
               <input type="text" name="phone" value="${data.phone}" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
             </div>
           </div>
           <div class="layui-form-item">
                   <label class="layui-form-label">是否营业：</label>
                   <div class="layui-input-block">
                     <input type="radio" name="check" value="true" title="立即营业" checked>
                     <input type="radio" name="check" value="false" title="暂不营业">
                   </div>
                 </div>
                 <div class="layui-input-block">
                 <input type="button" id="enterBtn" class="layui-input" value="立即提交">
                   
                 </div>
           </div>
           <div class="layui-form-item">
             <div class="layui-input-block">
               
             </div>
           </div>
         </form>`} else {
            str += `<form class="layui-form" style="background-color:white;padding-top:20px;padding-bottom:60px;padding-left:60px;width:500px">
          <div class="layui-form-item">
            <label class="layui-form-label">影院名称</label>
            <div class="layui-input-block">
              <input type="text" value="${data.name}" name="cinemaName" lay-verify="title" autocomplete="off" placeholder="请输入需要修改的值" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">请输入影院详细地址</label>
            <div class="layui-input-block">
              <input type="text" value="${data.address}" name="address"  lay-verify="title" autocomplete="off" placeholder="（XX区XX路XXX号）" class="layui-input">
            </div>
          </div> 
          <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-block">
              <input type="text" name="phone" value="${data.phone}" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
                  <label class="layui-form-label">是否营业：</label>
                  <div class="layui-input-block">
                    <input type="radio" name="check" value="true" title="立即营业" >
                    <input type="radio" name="check" value="false" title="暂不营业" checked>
                  </div>
                </div>
                <div class="layui-input-block">
                <input type="button" id="enterBtn" class="layui-input" value="立即提交">
                  
                </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              
            </div>
          </div>
        </form>`
          }

          layer.open({
            type: 1,
            closeBtn:1,
            area: ['700px', '400px']
            , id: "wtf"
            , shade: 0,
            content: str,
            //不显示遮罩
            
          });
          layui.form.render();
          $(`#enterBtn`).on("click", async (e) => {
            var name = $(`input[name=cinemaName]`).val();
            var address = $(`input[name=address]`).val();
            var phone = $(`input[name=phone]`).val();
            var status = $(`input[name=check]:checked`).val();
            var data = {
              _id,
              name, address, phone, status
            };
            await cinemaApi.update(data);
            layer.closeAll();
           const Nowdata = await cinemaApi.get();
           Nowdata.map((item) => {
            if (item.status) {
              item.status = `<input type="checkbox" _id="${item._id}"  checked lay-filter="checkClose" name="checkClose" lay-skin="switch" lay-text="营业|停业"/>     
              `;
            } else {
              item.status = `
              <input type="checkbox" _id="${item._id}"id="checkClose" lay-filter="checkClose" name="checkClose" lay-skin="switch" lay-text="营业|停业"/>
              
              `;
            }
          });
            rerender(Nowdata);
          })
        }else if(obj.event==='hash'){
          location.hash=`/#/info/theaters-search/${_id}`
        }

      });
// 监听checkColse框（营业框）
layui.form.on("switch(checkClose)", async function (data) {
  const _id = $(data.elem).attr("_id");
  const status = data.elem.checked;
  console.log(status,_id);

  await cinemaApi.updateStatus({_id, status});
});
    });


    // 配置事件
    this.rerender();
  }
}